<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="echarts" id="leftTopChart"></div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ECharts, EChartsOption, init } from "echarts";
import * as echarts from "echarts";

// 初始化图表
const initChart = (data: any): ECharts => {
  const charEle = document.getElementById("leftTopChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  const option: EChartsOption = {
    xAxis: {
      type: "category",
      data: data.map((v: any) => v.year),
      axisLabel: {
        inside: false,
        color: "#fff"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#fff"
      }
    },
    dataZoom: [
      {
        type: "inside"
      }
    ],
    grid: {
      //布局
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "32px",
      containLabel: true,
      borderColor: "#1F63A3"
    },
    series: [
      {
        data: data.map((v: any) => v.value),
        type: "bar",
        // showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" }
            ])
          }
        }
      }
    ]
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
